<template>
  <div class="base-block">
    <k-toolbar>
      <el-button type="primary" @click="onClickCreate(0)">添加商品</el-button>
    </k-toolbar>
    <k-table v-bind="tableState" v-on="tableEvent">
      <!-- 商品信息 -->
      <template #product="{ row }">
        <div class="info" @click="onClickDetail(row)">
          <el-image :src="row.cover" class="info-img" alt="cover" />
          <div class="info-right">
            <div class="info-right__title">
              <EllipsisText :content="row.title" :width="168" show-tooltip />
              <SvgIcon class="icon" name="juejin-link" />
            </div>
            <p class="info-right__name base-text-ellipsis">{{ row.title }}</p>
          </div>
        </div>
      </template>
      <!-- 店铺 -->
      <template #shop="{ row }">
        <div class="shop">
          <EllipsisText :content="row.shop_name" :width="84" show-tooltip />
          <ScoreLevel :number="row.shop_score" />
        </div>
      </template>
      <!-- 佣金 -->
      <template #cos_ratio="{ row }">
        <div class="payment">
          <div class="title base-text-ellipsis">{{ (row.colonel_cos_ratio * 100).toFixed(1) + '%' }}</div>
          <div v-if="row.is_high_cos_ratio" class="tag">高佣</div>
        </div>
      </template>
      <!-- 商品状态 -->
      <template #status="{ row }">
        {{ skuStatusMaps[row.status] }}
      </template>
      <!-- 关联橱窗数 -->
      <template #shop_count="{ row }">
        <div class="relative" @click="onClickRelative(row)">
          {{ row.shop_count }}
        </div>
      </template>
      <template #actions="{ row }">
        <el-link type="primary" :disabled="row.status == 3" @click="onClickCreate(1, row)">编辑</el-link>
        <el-link type="danger" @click="onClickDel(row)">删除</el-link>
      </template>
    </k-table>
  </div>
  <!-- 商品信息 -->
  <DetailModal ref="detailModal" />
  <!-- 关联橱窗 -->
  <RelativeListModal ref="relativeListModal" />
  <CreateProductDrawer ref="CreateProductDrawerRef" @submit="methods.onSearch" />
</template>

<script setup lang="ts">
import { defineComponent, ref } from 'vue';
import { ElMessage } from 'element-plus';
import EllipsisText from '@/components/base-ellipsis-text/index.vue';
import SvgIcon from '@/components/svg-icon/svg-icon.vue';
import ScoreLevel from '@/views/crm-kgj/juejin/goods-list/components/score-level.vue';
import { baseConfirm } from '@crud/index';
import { skuStatusMaps, useTableListSlot } from '../hooks/use-table';
import DetailModal from '../../goods-list/components/detail-modal.vue';
import RelativeListModal from '../../goods-list/components/relative-list-modal.vue';
import { slotProductRemove } from '@/api/crm-kgj/slot';
import CreateProductDrawer from './create-product-drawer.vue';
defineComponent({ name: 'RecommendProduct' });

const { state, tableState, tableEvent, ...methods } = useTableListSlot();
// 商品信息
const detailModal = ref();
const onClickDetail = (row: any) => {
  detailModal.value.show(0, row);
};
// 关联橱窗
const relativeListModal = ref();
const onClickRelative = (row: any) => {
  relativeListModal.value.show(0, row);
};
// 删除
const onClickDel = async(row: any) => {
  if (row.status === 1) await baseConfirm({ type: 'none', title: '删除', message: '当前为上架状态，请下架后进行操作' });
  else {
    await baseConfirm({ type: 'none', title: '删除', message: '删除后将无法复原，确定删除？' });
    const res = await slotProductRemove(row.id);
    if (res.data) {
      ElMessage.success('删除成功');
      methods.onSearch();
    }
  }
};
// 创建商品
const CreateProductDrawerRef = ref();
const onClickCreate = (mode: number, row?: any) => {
  CreateProductDrawerRef.value.show(mode, row);
};
// 筛选
const onFilter = (val: any) => {
  state.params = val;
  methods.onSearch();
};

defineExpose({
  onFilter
});
</script>

<style lang="scss" scoped>
.info {
  display: flex;
  align-items: center;
  cursor: pointer;

  &-img {
    flex-shrink: 0;
    width: 47px;
    height: 47px;
  }

  &-right {
    flex: 1;
    margin-left: 8px;
    overflow: hidden;

    &__title {
      display: flex;
      align-items: center;
      color: #606266;

      &:hover {
        color: #4975E9;
      }

      .icon {
        flex-shrink: 0;
        width: 14px;
        height: 14px;
        margin-left: 4px;
      }
    }

    &__name {
      margin-top: 4px;
      font-size: 12px;
      line-height: 20px;
      color: #909399;
    }
  }
}

.shop {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.payment {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;

  .tag {
    width: 38px;
    height: 18px;
    padding: 0 4px;
    margin-right: 4px;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    color: #ec803d;
    text-align: center;
    background-color: #fff1ec;
    border: 1px #ec803d solid;
    border-radius: 2px;
  }
}

.relative {
  color: #4975e9;
  cursor: pointer;
}
</style>
